import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
// import { HttpClientModule }    from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { SettingComponent } from './components/setting/setting.component';
import { TermComponent } from './components/term/term.component';

import { TermService } from './services/term.service';
import { CourseService } from './services/course.service';
import { ClassService } from './services/class.service';


import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { BsDatepickerModule, DatepickerModule } from 'ngx-bootstrap/datepicker';
import { AlertModule } from 'ngx-bootstrap/alert';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { PopoverModule } from 'ngx-bootstrap';

import { defineLocale } from 'ngx-bootstrap/chronos';
import { zhCnLocale } from 'ngx-bootstrap/locale';
import { EditModalComponent, DeleteModalComponent } from './components/term/term.component';
import {
    CourseComponent,
} from './components/course/course.component';
import { ClassComponent, ClassAddModalComponent } from './components/class/class.component';
import { MembersComponent } from './components/members/members.component';
import {
    ArrangementsComponent,
    ClassMemberModalComponent,
    MemberAddModalComponent,
    ClassMemberAddModalComponent} from './components/arrangements/arrangements.component';
import { ArrangmentService } from './services/arrangment.service';
import { MemberService } from './services/member.service';
import { ShowComponent } from './show/show.component';
import { ShowCellComponent } from './components/show-cell/show-cell.component';
defineLocale('zh-cn', zhCnLocale);


const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/show',
        pathMatch: 'full'
    },
    {
        path: 'setting',
        component: SettingComponent,
        children: [
            {
                path: '',
                redirectTo: '/setting/term',
                pathMatch: 'full'
            },
            {
                path: 'term',
                component: TermComponent
            },
            {
                path: 'course',
                component: CourseComponent
            },
            {
                path: 'class',
                component: ClassComponent
            }
        ],
    },
    {
        path: 'members',
        component: MembersComponent,
    },
    {
        path: 'arrangements',
        component: ArrangementsComponent,
    },
    {
        path: 'show',
        component: ShowComponent,
    },
];


@NgModule({
  declarations: [
    AppComponent,
    SettingComponent,
    TermComponent,
    EditModalComponent,
    DeleteModalComponent,

    CourseComponent,

    ClassComponent,
    ClassAddModalComponent,
    MembersComponent,
    MemberAddModalComponent,

    ArrangementsComponent,
    ClassMemberModalComponent,
    ClassMemberAddModalComponent,
    ShowComponent,
    ShowCellComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BsDropdownModule.forRoot(),
    BsDatepickerModule.forRoot(),
    PaginationModule.forRoot(),
    DatepickerModule.forRoot(),
    AlertModule.forRoot(),
    ModalModule.forRoot(),
    PopoverModule.forRoot(),
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
      TermService,
      CourseService,
      ClassService,
      MemberService,
      ArrangmentService,
    ],
  bootstrap: [AppComponent],
  entryComponents: [
    EditModalComponent,
    DeleteModalComponent,

    ClassAddModalComponent,

    MemberAddModalComponent,

    ClassMemberModalComponent,
    ClassMemberAddModalComponent,
  ],
})
export class AppModule { }
